<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./css/inputC.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 引入layui.css -->
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
    <!-- 引入layui.js -->
    <script scr="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
      <!--表单信息（搜索条件）-->
      <div class="layui-form">
        <!--这两个隐藏的输入框用来存放当前页码值，以及页面显示数据的最大行数-->
        <input type="hidden" name="pageNum" id="pageNum" value="1">
        <input type="hidden" name="pageSize" id="pageSize" value="10">
        <div class="layui-form-item">

          <div class="layui-inline">
<!--            <label class="layui-form-label">用户名</label>-->
<!--            <div class="layui-input-block">-->
              <input type="text" name="username" placeholder="用户名" autocomplete="off" class="layui-input" >
<!--            </div>-->
          </div>
          <div class="layui-inline">
<!--            <label class="layui-form-label">手机号</label>-->
<!--            <div class="layui-input-block">-->
              <input type="text" name="telep" placeholder="手机号码" autocomplete="off" class="layui-input">
<!--            </div>-->
          </div>
          <!--    日期选择器-->
          <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
            <!--            <label class="layui-form-label">日期</label>-->
<!--            <div class="layui-input-block">-->
              <input type="text" class="layui-input" name="dateRange" id="dateSelect" placeholder="注册日期">
<!--            </div>-->
          </div>
            <div class="layui-inline">
                <select name="memberstate" id="memberstate" >
                    <option value="">会员状态</option>
                    <option value="0">普通用户</option>
                    <option value="1">会员用户</option>
                </select>
            </div>
          <div class="layui-inline">
            <button id="getUser" class="layui-btn" lay-submit lay-filter="LAY-user-front-search">
              <i class="layui-icon layui-icon-search"></i>
            </button>
          </div>
        </div>
      </div>
<!--      <xblock>-->
<!--        <button class="layui-btn layui-btn-danger" onclick="delMany()" id="delMany1"><i class="layui-icon"></i>批量删除</button>-->
<!--&lt;!&ndash;        <button class="layui-btn" onclick="x_admin_show('添加用户','./user-add.html',600,400)"><i class="layui-icon"></i>添加</button>&ndash;&gt;-->
<!--        <span class="x-right" style="line-height:40px" id="userNum">共有数据：88 条</span>-->
<!--      </xblock>-->

      <script type="text/html" id="table-operation">
<!--        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
          <i class="layui-icon layui-icon-edit"></i>编辑</a>-->
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
          <i class="layui-icon layui-icon-delete"></i>删除</a>
      </script>

      <div style="text-align: center;margin: 0 auto">
        <!--数据表格位置-->
        <table id="data-table" lay-filter="data-table"></table>
        <!--分页位置-->
        <div id="data-page" class="layui-table-page" lay-filter="data-page"></div>
      </div>

    </div>


    <script>
        var uids=new Array()
        var uidsList=new Array()
        var delManyTrDom=new Array()

        /*删除数组中指定下标的元素,arr-数组,item-元素值*/
        function remove(arr, item) {
            for(var i=arr.length-1;i>=0;i--)
            {
                if(arr[i]==item)
                {
                    arr.splice(i,1);
                }
            }
            return arr;
        }
        // 此时不用考虑位置影响

      layui.use(['form','table','laypage','layer','laydate'], function() {
        var $ = layui.jquery
                ,form = layui.form,table = layui.table,laypage=layui.laypage,layer=layui.layer,laydate=layui.laydate;
        //limits是渲染分页工具栏时用到的参数，表示每页可以显示的最大条数，填写这个参数后，就会出现选择
//每页最大显示条数的下拉选择框
        var limits = [10, 20, 30, 40]
        var pageNum=$("#pageNum")
        var pageSize=$("#pageSize")


        //执行一个laydate实例
        laydate.render({
          elem: '#dateSelect',//指定html中的id
          range:'~' //自定义分割字符
        })

    let userTable=table.render({
          elem: "#data-table",//被渲染表格的id，因为用到的是id选择器，所以要添加#号// url: "/users/getUserByPageNum",//请求地址// 默认会自动传递两个参数：?page=1&limit=30（该参数可通过 request 自定义）
          url: "/users/getUserByPageNum",//请求地址
          id:"idTest",
          // width:1250,
          cols: [[
              // { type: 'checkbox' },
              {field: "uid",  title: "ID",width:30, sort: true,hide:true},//sort：这一列是否开启排序
              {field: "username", title: "用户昵称",align: "center",}, //title:表头里的文字内容//field:字段名，要与后端响应的数据字段一致，否则该数据不会在表格中显示
              {field: "avatar", title: "用户头像",style:"height:40px",align: "center", templet: "#imgtmp"},
              {field: 'memberstate', title: '会员状态', align: 'center', templet: '#statusTemplet'},
              {field: "telep", title: "手机",align: "center"},
              {field: "colonelname", title: "团长",align: "center"},
              {field: "balance", title: "余额",sort:true, align: "center"},
              {field: "registertime", title: "注册时间",sort:true, align: "center"},
              {title: "操作", align: "center",toolbar: "#table-operation"}
            ]],
          done:function (res, curr, count) {
            $('#userNum').html('共有数据：'+res.count +' 条')    //显示总数据量
            console.log("服务器返回数据")
            console.log(res)
              let data=res.data
              //  把该页所有数据的用户id保存到uidsList用于后面的全选删除操作
             console.log(data)
              for (let i=0;i<data.length;i++){
                  uidsList.push(data[i].uid)
              }
              console.log("uidsList:"+uidsList)
            laypage.render({
              elem: 'data-page',//被渲染的分页栏id，此处不需要加#号
              count: count,//数据总条数
              curr:  res.pageNum,//当前页码
              limit: res.pageSize,//当前页展示的最大行数
              limits: limits,//分页大小选项
              //分页栏的样式，具体情况可以去layui镜像网站查看
              layout:['count','prev','page','next','limit','skip'],
              //jump函数在操作分页栏后开始执行,比如执行跳转到某页
              //obj：当前分页栏的所有属性值
              //first:是否是第一次加载
              jump:function (obj,first) {
                //将当前分页栏的属性打印在控制台，方便观察
                console.log("当前分页栏的属性")
                console.log(obj)

                //当操作分页栏后，获得当前页码的数据，赋值给隐藏的用来存放页码的输入框
                $("#pageNum").val(obj.curr)
                // pageNum=obj.curr
                //同理它是赋值给pageSize的
                $("#pageSize").val(obj.limit)
                // pageSize=obj.limit
                //如果是首次加载页面，那就不执行
                if (!first){
                  //不是首次加载页面的话，就触发按钮的提交事件
                  $("#getUser").click()
                    uidsList=[]
                    uids=[]
                }
              }
            });
          },
        });

//        $("#getUser").click()执行函数
//submit后面括号里跟的值是lay-filter的值
//回调函数里的data就是lay-filter所在元素的所有的值

        form.on('submit(LAY-user-front-search)', function (data) {
          var filed = data.field;
          console.log("-=-=-=-=-=-=-=-=")
          console.log(filed)
          table.reload('idTest', {
              where:filed
          });
          return false;
        });

        /*
        * 右侧工具类编辑、删除、查看等的点击事件函数
        * */
          table.on('tool(data-table)', function(obj){ //注：tool 是工具条事件名，data-table 是 table 原始容器的属性 lay-filter="对应的值"
              var data = obj.data; //获得当前行数据
              var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
              var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
              console.log(data)
              var uid=data.uid;
              if(layEvent === 'detail'){ //查看
                  //do somehing
              } else if(layEvent === 'del'){ //删除
                  layer.confirm('真的删除行么', function(index){
                      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                      layer.close(index);
                      //向服务端发送删除指令
                      $.ajax({
                          type: 'GET',
                          url: "/users/"+uid+"/delUserByUid",
                          processData: false,
                          contentType: false,
                          async: false,
                          success: function (res) {
                              console.log(res);
                              layer.msg('删除成功', {icon: 1});
                          }
                      });
                  });
              } else if(layEvent === 'edit'){ //编辑
                  //do something
                  //同步更新缓存对应的值


                  obj.update({
                      username: '123'
                      ,title: 'xxx'
                  });
              }
          });


         /*
         * 左侧第一列复选框的点击事件函数
         * */
          table.on('checkbox(data-table)', function(obj){
              var data=obj.data;
              console.log("复选框")
              console.log(obj); //当前行的一些常用操作集合
              console.log(obj.checked); //当前是否选中状态

              //若是选择状态，则加入uids数组
              if (obj.checked==true){
                $(this).addClass('layui-form-checked');
                  uids.push(data.uid)
                  // delManyTrDom.push(obj)
              }else{//若为未选择状态，则删除该uid
                $(this).removeClass('layui-form-checked');
                  uids=remove(uids,data.uid)
                  // delManyTrDom.indexOf(obj)
                  console.log("当前obj的数组下标："+delManyTrDom.indexOf(obj))
              }
              console.log(obj.data); //选中行的相关数据
              console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
              if (obj.type=="all"){
                $(this).addClass('layui-form-checked');
                  console.log(data);
                  uids=uidsList
              }
              console.log("uids:"+uids)
              // console.log("delManyTrDom:"+delManyTrDom)
          });

          //触发行单击事件,单击即可修改表格中数据
/*          table.on('row(data-table)', function(obj){
              console.log(obj.tr) //得到当前行元素对象
              console.log(obj.data) //得到当前行数据
              //obj.del(); //删除当前行
              obj.update({
                  username: '123'
                  ,colonelname: 'xxx'
              });
          });*/


      })//layui结束




      function delMany(argument) {
          console.log("============="+uids)
          layer.confirm('确认要删除吗？' + uids, function (index) {
              $.ajax({
                  type: 'GET',
                  url: "/users/"+uids+"/delManyUsers",
                  processData: false,
                  contentType: false,
                  async: false,
                  success: function (res) {
                      console.log(res);
                      //捉到所有被选中的，发异步进行删除
                      layer.msg('删除成功', {icon: 1});
                      // for (let i=0;i<delManyTrDom.length;i++){
                      //   delManyTrDom[i].del()
                      // }
                      $(".layui-form-checked").parents('tr').remove();
                  }
              });
          });
      }
    </script>
    <script type="text/html" id="imgtmp">
        <img src="{{d.avatar}}" style="width:40px;height: 40px;">
    </script>
    <script type="text/html" id="statusTemplet">
      {{# if(d.memberstate == 0) { }}
      <button class="layui-btn layui-btn layui-btn-xs">普通用户</button>
      {{# } else { }}
      <button class="layui-btn layui-btn-warm layui-btn-xs">会员用户</button>
      {{# } }}
    </script>
  </body>

</html>